<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>平台组件管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script type="text/javascript"
            src="../lib/vue/jquery.min.js"></script>
    <script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script type="text/javascript" src="../js/global.js"></script>
    <script type="text/javascript" src="../js/store.js"></script>
    <script type="text/javascript" src="../js/cookies.js"></script>
    <script src="../lib/vue/vue.min.js"></script>
    <script src="../lib/vue/axios.min.js"></script>
</head>

<body class="layui-anim layui-anim-up" onload="checkLogin ()">
<div id="developer">
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a>基本信息管理</a>
        <a>开发人员信息管理</a>
        <a>
          <cite>开发人员列表</cite></a>
      </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
           href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>


    <div class="x-body">
        <xblock>
            <div class="layui-row">
                <div class="layui-col-xs2 admin-permission" v-show="userType==2">
                    <button class="layui-btn" onclick="x_admin_show('添加开发人员','./developer-add.html',900,600)"><i
                            class="layui-icon"></i>添加开发人员
                    </button>
                </div>
                <div class="layui-col-xs10">
                    <div class="layui-inline" style="width: 200px;">
                        <input id="searchComponentName" type="text" name="searchComponentName"
                               placeholder="请输入组件名称关键字查询"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-inline" style="width: 200px;">
                        <input id="searchName" type="text" name="searchName" placeholder="请输入用户名称关键字查询"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-inline" style="width: 200px;">
                        <input id="searchCompanyName" type="text" name="searchCompanyName" placeholder="请输入公司名称关键字查询"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-inline" style="width: 200px;">
                        <input id="searchSysName" type="text" name="searchSysName" placeholder="请输入系统名称关键字查询"
                               autocomplete="off" class="layui-input">
                    </div>
                    <button class="layui-btn" data-type="reload"><i
                            class="layui-icon">&#xe615;</i></button>
                </div>
            </div>
        </xblock>
        <!--<xblock>
            <button class="layui-btn" onclick="x_admin_show('添加用户','./developer-add.html',800,600)"><i
                    class="layui-icon"></i>添加用户
            </button>
        </xblock>-->
        <table id="userList" lay-filter="userList"></table>
    </div>
    <input hidden id="editUser" value=""/>
</div>
<script type="text/html" id="userBar">
    {{#  if(parseInt(getCookie('userType'))==2&& d.userFlag==1&& parseInt(getCookie('sysId'))===d.sysId){ }}
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-even lay-event="delete">删除</a>
    {{#  }else{ }}
    <a style="color: gray">无操作权限</a>
    {{# } }}
</script>
<script type="text/html" id="role">
    {{#  if(d.userFlag == 2){ }}
    <a style="color: red">系统负责人</a>
    {{#  } else { }}
    <a>组件接入人员</a>
    {{#  } }}
</script>
<script type="text/html" id="componentNames">
    {{#  if(d.componentNames === null&&d.userFlag==2){ }}
    <a style="color: red">所有组件</a>
    {{#  } else if(d.componentNames === null&&d.userFlag==1) { }}
    <a style="=color: grey">暂无关联组件</a>
    {{#  }else{ }}
    <a style="color: blue">{{d.componentNames}}</a>
    {{#}}}
</script>
<script>
    layui.use(['table', 'form', 'layer'], function () {
        const table = layui.table
        //第一个实例
        let userInfoTable = table.render({
            elem: '#userList'
            , url: _hostUrl + '/userInfos/page' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'name', title: '用户名', width: 150, align: 'center'}
                , {field: 'userFlag', title: '角色', width: 150, align: 'center', templet: '#role'}
                , {field: 'telephone', title: '联系方式', width: 200, align: 'center'}
                , {
                    field: 'companyName', title: '所属公司', width: 150, align: 'center'
                }, {
                    field: 'sysName', title: '所属系统', width: 200, align: 'center'
                }, {
                    field: 'componentNames', title: '负责组件', align: 'center', width: 300, templet: '#componentNames'
                }
                , {title: '操作', align: 'center', toolbar: '#userBar'}
            ]]
            , request: {
                pageName: 'pageIndex' //页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            , response: {
                statusName: 'responseCode' //数据状态的字段名称，默认：code
                , statusCode: 200 //成功的状态码，默认：0
                , msgName: 'responseMsg' //状态信息的字段名称，默认：msg
                , rootName: 'data'
                , countName: 'totalRecord'
                , dataName: 'resultList'
            }
        })
        //加入搜索功能
        var $ = layui.$, active = {
            reload: function () {
                userInfoTable.reload({
                    where: {
                        name: $("#searchName").val(),
                        companyName: $("#searchCompanyName").val(),
                        componentNames: $("#searchComponentName").val(),
                        sysName: $("#searchSysName").val()
                    }
                })
            }
        };
        $('.layui-col-xs10 .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //监听工具条
        table.on('tool(userList)', function (obj) {
            const data = obj.data
            if (obj.event === 'delete') {
                layer.confirm('删除组件接入员[<span style="color: red">' + data.name + '</span>]时，' +
                    '将删除其所有关联组件关系，确定删除吗?', {
                    icon: 3,
                    title: '删除组件接入员'
                }, function (index) {
                    $.deleteJSON(_hostUrl + "/user/" + data.id, null, function (res) {
                        if (res.responseCode === 204) {
                            layer.msg('删除成功', {
                                icon: 1,
                                time: 1000
                            });
                            userInfoTable.reload(
                                {
                                    where: {
                                        pageIndex: 1
                                    }
                                }
                            )
                        } else {
                            layer.msg(res.responseMsg)
                        }
                    })
                })
            } else if (obj.event === 'edit') {
                $("#editUser").val(JSON.stringify(data));
                x_admin_show('修改组件接入员', './developer-edit.html', 600, 450)
            }
        })
    })
</script>

<script>
    let vm = new Vue({
        el: '#developer',
        data() {
            return {
                userType: 0
            }
        }, beforeMount() {
            this.userType = getCookie('userType');
        }
    })
</script>
</body>

</html>